<template>
  <div class="login-body">
    <div class="login-panel">
      <!-- 改版之后的 -->
      <div class="login-right">
        <div class="login-title">实训管理平台</div>
        <div class="login-user-info">
          <el-input
            class="login-user-info-input"
            placeholder="请输入账号"
            v-model="formData.username"
            style="width: 100%"
            :prefix-icon="User"
            clearable
          />
          <el-input
            class="login-user-info-input"
            placeholder="请输入密码"
            v-model="formData.password"
            style="width: 100%"
            type="password"
            :prefix-icon="Lock"
            show-password
          />
          <div class="find-password">
            <div class="find-password-info" @click="findPassword()">
              <el-icon class="icon"><RefreshRight /></el-icon>
              找回密码
            </div>
            <div class="login-register" @click="register()">用户注册</div>
          </div>
          <div
            class="display-common-horizontal-between"
            style="margin-top: 18px"
          >
            <div class="button-common-round-white rest" @click="reset()">
              重置
            </div>
            <div @click="login()" class="button-common-round login">登录</div>
          </div>
        </div>
      </div>

      <!-- 左侧 -->
      <!-- <div class="login-left"></div> -->
      <!-- 右侧form表单 -->
      <!--<div class="login-right">
        <div class="login-title">实训管理平台</div>
        <div class="login-user-info">
          <el-button type="info" disabled text class="login-user-info-btn">
            <el-icon style="font-size: 16px; margin-right: 20px; color: #a4a4a4"
              ><User /></el-icon
            >用户名
          </el-button>
          <el-input
            class="login-user-info-input"
            placeholder="请输入账号"
            v-model="formData.username"
            style="width: 100%"
            clearable
          />
          <el-button type="info" disabled text class="login-user-info-btn">
            <el-icon style="font-size: 16px; margin-right: 20px; color: #a4a4a4"
              ><Lock /></el-icon
            >密码
          </el-button>
          <el-input
            class="login-user-info-input"
            placeholder="请输入密码"
            v-model="formData.password"
            style="width: 100%"
            type="password"
            show-password
          />
          <el-button
            @click="login()"
            type="primary"
            round
            style="
              margin-left: 15px;
              margin-top: 15px;
              border-radius: 15px;
              width: 120px;
              color: #fff;
            "
          >
            确定<el-icon style="margin-left: 10px"><Right /></el-icon
          ></el-button>
          <el-divider border-style="double" style="margin-left: 15px" />
          <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              padding-left: 15px;
            "
          >
            <div
              style="
                color: #707070;
                cursor: pointer;
                display: flex;
                align-items: center;
              "
            >
              <el-icon
                style="margin-right: 10px; color: #707070; cursor: pointer"
                ><RefreshRight
              /></el-icon>
              重置
            </div>
            <div style="color: #707070; cursor: pointer">忘记密码</div>
          </div>
        </div>
         <el-form
          :model="formData"
          :rules="rules"
          ref="formDataRef"
          hide-required-asterisk
        >
          <el-form-item prop="username" label="用户名">
            <el-input
              placeholder="请输入账号"
              v-model="formData.username"
              size="large"
              type="text"
            >
              <template #prefix>
                <el-icon>
                  <i-ep-user />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input
              placeholder="请输入密码"
              v-model="formData.password"
              size="large"
              type="password"
              @keyup.enter.native="login()"
            >
              <template #prefix>
                <el-icon>
                  <i-ep-lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
         <el-form-item label="">
                  <div class="check-code-panel">
                      <el-input placeholder="请输入验证码" v-model="formData.checkCode" class="input-panel" />
                      <img src="checkCodeUrl" class="check-code">
                  </div>
              </el-form-item>
         <el-form-item label="">
                  <el-checkbox label="记住密码" name="type" />
              </el-form-item>
          <el-form-item label="">
            <el-button
              type="primary"
              style="width: 100%"
              @click="login()"
              size="large"
              >{{ t("login") }}</el-button
            >
          </el-form-item>
        </el-form>
      </div>-->
    </div>
    <!-- 抽屉弹框 -->
    <el-drawer
      v-model="findPasswordVisible"
      :direction="direction"
      size="40%"
      close-on-click-modal
    >
      <template #header>
        <h4>找回密码</h4>
      </template>
      <template #default>
        <!-- form表单 -->
        <el-form
          :model="findPasswordForm"
          :rules="findPasswordRules"
          label-width="100px"
          ref="ruleFormRef"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              style="box-shadow: 0 0 0 1px var(--el-border-color) inset"
              v-model="findPasswordForm.username"
              placeholder="请输入有效的用户名"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              style="box-shadow: 0 0 0 1px var(--el-border-color) inset"
              v-model="findPasswordForm.password"
              placeholder="请输入8-16位的密码,且需包含大小写字母,数字,特殊符号中的两种及以上的组合密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              style="box-shadow: 0 0 0 1px var(--el-border-color) inset"
              v-model="findPasswordForm.email"
              placeholder="请输入注册时使用的邮箱"
            >
              <template #append>
                <el-button :disabled="disabled" @click="sendEmailCode">{{
                  codeText
                }}</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input
              style="box-shadow: 0 0 0 1px var(--el-border-color) inset"
              v-model="findPasswordForm.code"
              placeholder="请输入邮箱获取的验证码"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="confirmClick(ruleFormRef)"
            >找回并登录</el-button
          >
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { useCounter } from "@/store/counter.js";
import Cookies from "js-cookie";
import { setUserInfo } from "@/service/index.js";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { setToken } from "@/utils/auth.js";
// import jwt_decode from "jwt-decode";
import * as jwt_decode from "jwt-decode";
import { User, Lock } from "@element-plus/icons-vue";
import { LoginEvent } from "@/api/Login";
import { sendCode } from "@/api/user";

// Element-Plus的依赖采用的是自动导入，所以这里无需显示的引入，其他地方的element-plus引用同理
// import { ElMessage } from 'element-plus';
// import request from '@/utils/request';      //这里使用自行封装的axios，下文已给出，照搬后修改运行端口即可

const store = useCounter();

const { t } = useI18n();
const router = useRouter();
// const checkCodeUrl = "api/checkCode?" + new Date().getTime();
//表单
const formDataRef = ref();
let formData = ref({
  username: "Lijw_test2",
  password: "123456Aa",
});
const rules = {
  username: [
    {
      required: true,
      message: "请输入用户名",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
    },
  ],
  // checkCode: [{
  //     required: true,
  //     message: "请输入验证码"
  // }],
};
// 登录相关
const login = () => {
  // Login 是请求api 用的时候封装一哈
  LoginEvent(formData.value)
    .then((res) => {
      // let token = getCookie("SESSIONID");
      if (res.code === 200 && res.msg === "success") {
        let token = res.token;
        Cookies.set("loginToken", token);
        // 使用jwt_decode库来解码JWT令牌
        const decoded = jwt_decode.jwtDecode(token);
        console.log("decoded", decoded);
        // 存储用户信息
        store.setUserInfo(decoded);
      }
      // 激活菜单状态
      localStorage.setItem("activeMenu", "/home");
      ElNotification({
        title: "老师下午好！",
        message: "欢迎登录实训管理平台",
        type: "success",
      });
      router.push({
        path: "/home",
      });
    })
    .catch((err) => {
      console.log(err);
    });
};

//注册相关
const register = () => {
  router.push({
    path: "/register",
  });
};

//找回密码内容
const findPasswordVisible = ref(false);
const direction = ref("ltr");
const ruleFormRef = ref(null);
const findPasswordForm = ref({
  username: "",
  email: "",
  password: "",
  code: "",
});

const findPasswordRules = {
  username: [
    {
      required: true,
      message: "请输入有效的用户名",
    },
  ],
  email: [
    {
      required: true,
      message: "请输入有效的邮箱",
    },
    // 邮箱格式校验 包含163邮箱 qq邮箱 等
    {
      pattern:
        /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
      message: "请输入符合要求的有效的邮箱",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入有效的密码",
    },
    // 密码格式为 8-16位的密码,且需包含大小写字母,数字,特殊符号中的两种及以上的组合密码
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,16}$/,
      message: "请输入符合要求的有效密码",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入有效的验证码",
    },
  ],
};

const findPassword = () => {
  // 使用抽屉弹框
  findPasswordVisible.value = true;
};
const disabled = ref(false);
const codeText = ref("获取验证码");
const sendEmailCode = () => {
  // 发送邮箱验证码
  sendCode(findPasswordForm.value.email, findPasswordForm.value.username)
    .then((res) => {
      if (res.code === 200 && res.msg === "success") {
        ElNotification({
          title: "邮箱验证",
          message: "验证码已发送到您的邮箱,请注意查收",
          type: "success",
        });
        // 倒计时
        countDown();
      }
    })
    .catch((err) => {
      ElNotification({
        message: "验证码发送失败,请检查邮箱是否正确",
        type: "error",
      });
      console.log(err);
    });
};

// aahsG11G! 123456@qq.com

const countDown = () => {
  // 禁用按钮
  disabled.value = true;
  let time = 59;
  let timer = setInterval(() => {
    codeText.value = time + "s后重新发送";
    time--;
    if (time === 0) {
      codeText.value = "获取验证码";
      clearInterval(timer);
      disabled.value = false;
      time = 59;
    }
  }, 1000);
};

const cancelClick = () => {
  findPasswordVisible.value = false;
};

const confirmClick = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      // 提交表单 发送请求
    } else {
      console.log("error submit!", fields);
    }
  });
};

//重置相关
const reset = () => {
  formData.value.username = "";
  formData.value.password = "";
};
</script>
<style lang="scss" scoped>
.login-body {
  background: url("../../assets//images/loginCover.png") no-repeat center center;
  background-color: #b7d9ff;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-panel {
    position: absolute;
    right: 10%;
    width: 620px;
    height: 590px;
    background: #e9f1fc;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    opacity: 1;
    display: flex;
    // margin: auto;
    // width: 70%;
    // min-width: 460px;
    // height: 70%;
    // min-height: 300px;
    // background: rgba(255, 255, 255, 0.6);
    // .login-left {
    //   width: 50%;
    //   background: url("../../assets/images/loginLeft.png") no-repeat center;
    //   background-image: 100% 100%;
    //   background-size: cover;
    //   .login-img {
    //     width: 100%;
    //     height: 100%;
    //     img {
    //       width: 100%;
    //       height: 100%;
    //     }
    //   }
    // }
    .login-right {
      width: 100%;
      padding: 60px 40px;
      box-sizing: border-box;
      .login-form {
        width: 100%;
        margin-top: 30px;
        .login-btn {
          width: 100%;
        }
      }
    }
    .login-title {
      font-size: 22px;
      text-align: center;
      margin-bottom: 50px;
      color: #4ca2fe;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 44px;
      color: #484848;
    }
    .login-user-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      box-sizing: border-box;
      .login-user-info-btn {
        margin-bottom: 10px;
      }
      .login-user-info-input {
        margin-bottom: 50px;
        padding-left: 15px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        height: 60px;
        background: #ffffff;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
        border-radius: 5px;
        opacity: 0.6;
      }
    }
  }
  .login-user-info-input:deep(.el-input__inner) {
    height: 60px;
    font-size: 18px;
    color: #484848;
    border: none !important;
    box-shadow: none !important; /* 可选，移除阴影 */
  }
  .login-user-info-input:deep(.el-input__wrapper) {
    border: none;
    padding: 0;
    border: none !important;
    box-shadow: none !important; /* 可选，移除阴影 */
    padding-right: 20px;
  }
  .login-user-info-input:deep(.el-input__prefix) {
    font-size: 18px;
    color: #484848;
  }
  .login-user-info-input:deep(.el-input__password) {
    font-size: 18px;
    color: #484848;
  }
  :deep(.el-input__wrapper) {
    border: none !important;
    box-shadow: none !important; /* 可选，移除阴影 */
    box-shadow: none !important;
  }
  /* 如果需要移除聚焦时的边框 */
  .el-input__inner:focus {
    outline: none !important;
  }
  .login-user-info:deep(.el-button + .el-button) {
    margin-left: 0;
  }
  .login-user-info:deep(.el-button > span) {
    color: #484848;
    font-size: 16px;
  }
  .find-password {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 5px;
  }
  .find-password-info {
    color: #707070;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 20px;
    border-radius: 5px;
  }
  .login-register {
    color: #707070;
    cursor: pointer;
  }
  .login {
    width: 240px;
    text-align: center;
    height: 60px;
    line-height: 46px;
    border-radius: 5px !important;
  }
  .rest {
    width: 240px;
    text-align: center;
    height: 60px;
    line-height: 46px;
    border-radius: 5px !important;
  }
  .icon {
    margin-right: 6px;
    color: #484848;
    cursor: pointer;
    margin-top: 2px;
  }
  .el-form-item {
    margin-bottom: 22px;
  }
}
</style>
